<template>
	<div class="settings-preferences flex flex-col gap-5">
		<SettingsCard titleT="set.pref.account">
			<SettingsCardItem class="items-center" titleT="set.pref.lang" :wrap="!isDesktop">
				<template #suffix>
					<BaseSelect
						v-model="appStore.lang"
						:options="getLangList()"
						class="md:w-[200px]"
						arrow="down" />
				</template>
			</SettingsCardItem>
			<SettingsCardItem class="items-center" titleT="set.pref.odds" :wrap="!isDesktop">
				<template #suffix>
					<BaseSelect
						:model-value="appStore.odds"
						:options="enumList(Odds)"
						@update:model-value="(val) => appStore.setOdds(val)"
						class="md:w-[200px]"
						arrow="down">
						<div class="mr-auto">
							{{ $t('app.odds') }}:
							<span class="text-primary">{{ getOddsCode(appStore.odds) }}</span>
						</div>
					</BaseSelect>
				</template>
			</SettingsCardItem>
		</SettingsCard>
		<SettingsCard titleT="set.pref.privacy">
			<SettingsCardItem titleT="set.pref.incognito" subtitleT="set.pref.incognitoDesc">
				<template #prefix>
					<n-switch
						:default-value="profileStore.userInfo?.incognitoMode"
						size="large"
						class="mr-4"
						:loading="loadingIncognitoMode"
						@update:value="(val) => runIncognitoMode({ status: val })" />
				</template>
			</SettingsCardItem>
			<SettingsCardItem titleT="set.pref.private" subtitleT="set.pref.privateDesc">
				<template #prefix>
					<n-switch
						:default-value="profileStore.userInfo?.privateMode"
						size="large"
						class="mr-4"
						:loading="loadingPrivateMode"
						@update:value="(val) => runPrivateMode({ status: val })" />
				</template>
			</SettingsCardItem>
		</SettingsCard>
		<SettingsCard titleT="set.pref.marketing">
			<SettingsCardItem titleT="set.pref.promo" subtitleT="set.pref.promoDesc">
				<template #prefix>
					<n-switch
						:default-value="profileStore.userInfo?.enablePush"
						size="large"
						class="mr-4"
						:loading="loadingEnablePush"
						@update:value="(val) => runEnablePush({ status: val })" />
				</template>
			</SettingsCardItem>
		</SettingsCard>
	</div>
</template>

<script setup lang="ts">
import { NSwitch } from 'naive-ui'
import { Odds } from '@/enums'
import { BaseSelect } from '@/components/base'
import { isDesktop, useRequest } from '@/hooks'
import { useAppStore, useProfileStore } from '@/store'
import { enumList, getLangList, getOddsCode } from '@/utils'
import { SettingsCard, SettingsCardItem } from '../components'
import { updateEnablePush, updateIncognitoMode, updatePrivateMode } from '@/api/account.ts'

const appStore = useAppStore()
const profileStore = useProfileStore()

const { run: runIncognitoMode, loading: loadingIncognitoMode } = useRequest(updateIncognitoMode, {
	showError: true,
	showSuccess: true,
	onSuccess: () => profileStore.getUserInfo()
})
const { run: runPrivateMode, loading: loadingPrivateMode } = useRequest(updatePrivateMode, {
	showError: true,
	showSuccess: true,
	onSuccess: () => profileStore.getUserInfo()
})
const { run: runEnablePush, loading: loadingEnablePush } = useRequest(updateEnablePush, {
	showError: true,
	showSuccess: true,
	onSuccess: () => profileStore.getUserInfo()
})
</script>

<style scoped></style>
